<template>
	<view class="steps-container">
		<view class="step-item " :class="video.date <= serverDate ? 'active' : ''" v-for="video in videoList"
			:key="video.id">
			<view class="step-icon"></view>
			<view class="step-content">
				<view class="date">{{video.date}}</view>
				<view class="video-container">
					<video :id="video.id" @fullscreenchange="fullscreenchange" @ended="onVideoEnded"
						style="margin-top:-2rpx;height:368rpx;border-radius:16rpx;width: 100%;boder:8rpx solid #FFF0C8"
						:src="video.videoUrl" controls objectFit="fill" @play="videoPlay(video)">
						<!-- 覆盖层 -->
						<cover-view v-show="video.date > serverDate || (video.date < serverDate && !video.isPlay) "
							class="cover-layer" @click.prevent @touchstart.prevent>
							<cover-image src="https://maywork.oss-cn-shanghai.aliyuncs.com/static/lock.png"
								style="width: 100rpx;height: 100rpx;margin-left: 272rpx;margin-top: 140rpx;"></cover-image>
						</cover-view>

					</video>
				</view>
			</view>
		</view>
	<van-notify id="van-notify" />
	</view>
</template>
<script>
	import Notify from '@/wxcomponents/vant/notify/notify.js';
	import {
		videoList,
		formatDate1
	} from '../../../common/activity.js'
	export default {
		data() {
			return {
				videoList: [],
				serverDate: "",
				videoDate: "",
				videoId: ""
			}
		},
		beforeMount() {
			const serverDate = uni.getStorageSync("serverDate") || formatDate1(new Date().getTime())
			this.serverDate = serverDate
			this.videoList = videoList;
		},
		methods: {
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					//退出全屏暂停
					uni.createVideoContext(e.target.id, this).pause();
				}

			},
			videoPlay(video) {
				let videoContext = uni.createVideoContext(video.id, this)
				this.videoDate = video.date
				this.videoId = video.id
				if (video.date === this.serverDate) {
					const isPlayed = uni.getStorageSync("video_" + this.serverDate) || false
					if (!isPlayed) {
						Notify({ type: "success", message: "观看完视频可获得幸福值奖励" });
						setTimeout(()=>{
							videoContext.requestFullScreen()
						},1500)
					}else{
						videoContext.requestFullScreen()
					}
				}else{
					videoContext.requestFullScreen()
				}
				
				//判断视频是否当天播放
				// if (video.date === this.serverDate) {
				// 	//判断视频是否已经播放过
				// 	const isPlayed = uni.getStorageSync("video_" + this.serverDate) || false
				// 	if (!isPlayed) {
				// 		//todo 保存观看记录
				// 		uni.setStorageSync("video_" + this.serverDate, true)
				// 		const memberInfo = uni.getStorageSync("memberInfo") || {}
				// 		this.$request({
				// 			method: "POST",
				// 			header: {
				// 				"Content-Type": "application/json"
				// 			},
				// 			data: {
				// 				openid: memberInfo.userToken,
				// 				dataid: video.id,
				// 				type: "2"
				// 			},
				// 			url: '/wx/addLog'
				// 		})
				// 	}
				// }
			},
			videoPause() {
				console.log('视频暂停');
				
			},
			onVideoEnded(video) {
				console.log('视频播放完毕');
				//判断视频是否当天播放
				if (this.videoDate === this.serverDate) {
					//判断视频是否已经播放过
					const isPlayed = uni.getStorageSync("video_" + this.serverDate) || false
					console.log("是否播放：",isPlayed)
					if (!isPlayed) {
						uni.setStorageSync("video_" + this.serverDate, true)
						const memberInfo = uni.getStorageSync("memberInfo") || {}
						this.$request({
							method: "POST",
							header: {
								"Content-Type": "application/json"
							},
							data: {
								openid: memberInfo.userToken,
								dataid: this.videoId,
								type: "2"
							},
							url: '/wx/addLog'
						})
						uni.showModal({
							title: "温馨提示",
							content: "恭喜获得幸福值奖励",
							showCancel: false //不显示取消按钮
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.steps-container {
		display: flex;
		flex-direction: column;
		/* gap: 200px; */
		/* 控制步骤间距 */
		position: relative;
		padding: 20rpx 0;

		background-image: url('https://maywork.oss-cn-shanghai.aliyuncs.com/static/bg-main.png');
		background-size: 100% 100%;
		background-repeat: none;
		min-height: 180vh;

	}

	.date {
		width: 380rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 32rpx;
		background: #FFF0C8;
		text-align: center;
	}

	.video-container {
		// padding: 6px;
		margin-top: 30rpx;
		width: 93%;
		height: 360rpx;
		border-radius: 20rpx;
		border: 4px solid #FFF0C8;
		display: inline-block;
		overflow: hidden;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// background-color: #FFF0C8;


	}

	/* 单个步骤项 */
	.step-item {
		display: flex;
		align-items: start;
		position: relative;
		z-index: 1;
	}

	/* 步骤图标 */
	.step-icon {
		width: 8rpx;
		height: 8rpx;
		border: 8rpx solid #fcf1cc;
		border-radius: 50%;
		background: white;
		margin-right: 40rpx;
		position: relative;
		left: 18rpx;
	}

	/* 虚线连接线 */
	.step-item::after {
		content: '';
		position: absolute;
		left: 28rpx;
		/* 居中图标 */
		top: 28rpx;
		/* 从图标底部开始 */
		height: 484rpx;
		/* 与gap值一致 */
		border-left: 6rpx dashed #9c9c9c;
		/* 虚线样式 */

	}

	/* 激活状态 */
	.step-item.active .step-icon {
		/* border-color: #fcf1cc;
  background: #fcf1cc; */

		border-color: red;
		background: red;
		border: 12rpx solid #fcf1cc;
		width: 16rpx;
		height: 16rpx;
		left: 10rpx;
	}

	.step-item.active::after {
		border-left-color: #fcf1cc;
		/* 激活状态虚线颜色 */
	}

	/* 文字区域 */
	.step-content {
		flex: 1;
		padding-bottom: 20rpx;
	}

	.cover-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
		background-color: #000;
		border-radius: 16rpx;
		opacity: 0.5;
	}

	.cover-layer {
		z-index: 2;
		/* 确保覆盖层在最上层 */
		cursor: default;
		/* 移除点击手势提示 */
	}

	.hidden-video {
		z-index: 1;
		pointer-events: none;
		/* 关键：禁用视频点击事件 */
	}
</style>